<template>
  <el-row class="info">
    <!-- 左侧 -->
    <el-col :span="20">
      <span v-if="!isComponent">{{ data.name }}</span>
      <strong v-else>{{ data.name }}</strong>
    </el-col>
    <!-- 右侧 -->
    <el-col :span="4">
      <el-row type="flex">
        <el-col>{{ data.manager }}</el-col>
        <el-col>
          <!-- 操作下拉菜单 -->
          <el-dropdown>
            <span class="dropdown-btn">操作 <i class="el-icon-arrow-down" /></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="showDialog">添加子部门</el-dropdown-item>
                <el-dropdown-item v-if="!isComponent" @click.native="showEditDialog">编辑部门</el-dropdown-item>
                <el-dropdown-item v-if="!isComponent" @click.native="delDept">删除部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartments } from '@/api/departments'

export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    isComponent: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    showDialog() {
      this.$emit('showDialog', this.data)
    },
    showEditDialog() {
      this.$emit('showEditDialog', this.data)
    },
    async delDept() {
      // 二次确认是否真的要删除
      await this.$confirm('此操作将永久删除该文件, 是否继续?')
      // 发送删除请求
      await delDepartments(this.data.id)
      // 提示用户
      this.$message.success('删除成功')
      // 刷新页面
      this.$emit('reload')
    }
  }
}
</script>

<style scoped>
.info {
  width: 100%;
}
</style>
